<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="../templates/principal.xhtml">

    <ui:define name="content" id="content">        
        <h1 class="title ui-widget-header ui-corner-all">Bem Vindo ao Cadastro de Cidades</h1>

        <h:form>


            <p:dataTable id="tabCidade" widgetVar="wtabCidade" var="cidade" value="#{cidadeBean.lazyModel}" paginator="true" rows="10" lazy="true"
                         selection="#{cidadeBean.selectedCidade}" selectionMode="single" rowSelectListener="#{cidadeBean.onRowSelectCidade}"
                         onRowSelectComplete="cidadeDialog.show()" onRowSelectUpdate="panel, display">

                <f:facet name="header">
                    Selecione uma linha e clique para Manutenção
                </f:facet>

                <p:column headerText="Descrição" sortBy="#{cidade.dscCidade}" filterBy="#{cidade.dscCidade}">
                    <h:outputText value="#{cidade.dscCidade}" />
                </p:column>

                <p:column headerText="U.F." sortBy="#{cidade.codUf.codUf}" filterBy="#{cidade.codUf.codUf}">
                    <h:outputText value="#{cidade.codUf.codUf}" />
                </p:column>
            </p:dataTable>

            <p:dialog id="dialog" header="Detalhes Cidade" widgetVar="cidadeDialog" resizable="true"
                      width="600" showEffect="explode" hideEffect="explode">

                <p:panel id="panel">
                    <h:panelGrid id="display" columns="2" cellpadding="4">
                        <h:inputHidden />
                        <p:messages />
                        <h:outputText value="Código:" />
                        <p:inputText id="inCodigo" value="#{cidadeBean.selectedCidade.codCidade}" required="true" readonly="true" style="width:100px; font-weight:bold"/>

                        <h:outputText value="Descrição:" />
                        <p:inputText id="inDescricao" value="#{cidadeBean.selectedCidade.dscCidade}" required="true" style="width:400px; font-weight:bold;" />

                        <h:outputText value="U.F.:" />
                        <p:autoComplete id="acUf" value="#{cidadeBean.selectedCidade.codUf.codUf}" required="true" completeMethod="#{cidadeBean.complete}" 
                                        style="width:50px; font-weight:bold"/>
                    </h:panelGrid>     
                    <p:commandButton value="Novo" image="ui-icon ui-icon-folder-open" title="Clique para Inserir uma nova Cidade" 
                                     update="panel, display" action="#{cidadeBean.novo}" oncomplete="cidadeDialog.show()" />
                    <p:commandButton value="Inserir" update="messages,panel,tabCidade,display" 
                                     actionListener="#{cidadeBean.inserir}" oncomplete="cidadeDialog.hide()" rendered="#{!cidadeBean.disable}" />
                    <p:commandButton value="Alterar" update="messages,panel,tabCidade,display"
                                     actionListener="#{cidadeBean.alterar}" oncomplete="cidadeDialog.hide()" rendered="#{cidadeBean.disable}" />
                    <p:commandButton value="Excluir" onclick="confirmation.show()" type="button" rendered="#{cidadeBean.disable}" />
                </p:panel>
            </p:dialog>

            <p:confirmDialog message="Confirma a Exclusão dessa Cidade?"  
                             showEffect="bounce" hideEffect="explode"  
                             header="Exclusão da Cidade" severity="alert" widgetVar="confirmation">  

                <p:commandButton value="Sim" update="messages,panel,tabCidade,display" oncomplete="confirmation.hide(),cidadeDialog.hide()"  
                                 actionListener="#{cidadeBean.excluir}" />  
                <p:commandButton value="Não" onclick="confirmation.hide()" type="button" />   

            </p:confirmDialog>

        </h:form>
    </ui:define>
</ui:composition>